<template>
    <div class="app-container">
        <!--搜索栏-->

        <!--展示列表-->
        <div style="width:1000px;margin:auto">
            <!-- <el-button icon="el-icon-plus" plain size="mini" @click="authorizedDevice"
                v-hasPermi="['maintenance:device:add']">授权sim卡信息
            </el-button> -->

            <el-form :model="authorizeForm" label-width="100px">
                <el-form-item label="授权用户" required>
                    <el-select v-model="authorizeForm.userId" @change="handleUserChange" placeholder="请选择用户">
                        <el-option v-for="(item, index) in userList" :label="item.nickName"
                            :value="item.userId"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-tabs v-model="activeTab" @tab-click="tabChange">
                <el-tab-pane name="device" label="设备授权">
                    <device ref="device" :userInfo="userInfo"></device>
                </el-tab-pane>
                <el-tab-pane name="station" label="厂站授权">
                    <station ref="station" :userInfo="userInfo"></station>
                </el-tab-pane>
                <el-tab-pane name="simCard" label="sim卡授权">
                    <simCard ref="simCard" :userInfo="userInfo"></simCard>
                </el-tab-pane>
            </el-tabs>

        </div>


        <!-- 设备对话框 -->

        <!-- 授权设备给用户 -->

    </div>
</template>

<script>

import device from './device.vue'
import station from './station.vue'
import simCard from './simCard.vue'
import { listUser } from '@/api/system/user'

export default {
    components: {  device, station, simCard },
    data() {
        return {
            authorizeForm: {
                userId: null, // 授权用户ID
            },
            activeTab:"device",
            userInfo:{},
            userList: [], // 用户列表
        };
    },
    computed: {
    },
    created() {
        listUser().then((response) => {
            this.userList = response.rows;
        })
    },
    methods: {
        handleUserChange(userId) {
            // this.$refs[this.activeTab].handleUserChange(userId);
            this.userInfo = this.userList.find(user => user.userId === userId) || {};
        }
    },
};
</script>

<style lang="scss" scoped>
.autocomplete-item-disabled {
    color: #999;
    cursor: not-allowed;
    pointer-events: none;
    /* 禁止点击 */
}

/* 默认隐藏操作列 */
.operation-column {
    visibility: hidden;
}

/* 当鼠标悬停在行上时显示操作列 */
.el-table__row:hover .operation-column {
    visibility: visible;
}

/* 确保按钮在列显示时可见 */
.operation-buttons {
    white-space: nowrap;
}
</style>